import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowRight, Swords } from "lucide-react";
import { Container, Eyebrow } from "@/components/marketing/section";
import { Button } from "@/components/ui/button";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { CompareTable } from "@/components/models/compare-table";
import { PROVIDERS } from "@/lib/client/providers";
import { getPublicModels, flagshipModels } from "@/lib/models/public-data";
import { resolveCompareSlug, compareSlug, parseCompareSlug } from "@/lib/models/slug";
import { formatContext, formatPrice } from "@/lib/models/format";

export const dynamic = "force-dynamic";

type Params = Promise<{ slug: string }>;

async function resolve(slug: string) {
  if (!parseCompareSlug(slug)) return null;
  const { models, ctx } = await getPublicModels();
  const chosen = resolveCompareSlug(models, slug);
  return chosen ? { chosen, models, ctx } : null;
}

function names(models: { displayName: string }[]): string {
  return models.map((m) => m.displayName).join(" vs ");
}

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { slug } = await params;
  const r = await resolve(slug);
  if (!r) return { title: "Comparison not found", robots: { index: false } };
  const title = `${names(r.chosen)} — pricing, context & capabilities`;
  const description = r.chosen.map((m) => `${m.displayName} (${PROVIDERS[m.provider].shortName}): ${formatPrice(m.pricing?.inputPerMillion)} in / ${formatPrice(m.pricing?.outputPerMillion)} out per 1M tokens, ${formatContext(m.limits?.contextTokens)} context`).join(" · ") + ". Compared side by side on PolyLLM.";
  const canonical = `/compare/${compareSlug(r.chosen)}`;
  return { title, description, alternates: { canonical }, openGraph: { title: `${names(r.chosen)} — PolyLLM`, description, url: canonical } };
}

export default async function ComparePage({ params }: { params: Params }) {
  const { slug } = await params;
  const r = await resolve(slug);
  if (!r) notFound();
  const { chosen, models, ctx } = r;
  const arenaHref = `/app/arena?models=${encodeURIComponent(chosen.map((m) => m.key).join(","))}`;
  const chosenKeys = new Set(chosen.map((m) => m.key));
  const related = flagshipModels(models, 6)
    .filter((f) => !chosenKeys.has(f.key))
    .slice(0, 4)
    .map((f) => ({ f, slug: compareSlug([chosen[0], f]) }));

  return (
    <>
      <section className="border-b border-border bg-bg-subtle/60 py-12 sm:py-16">
        <Container>
          <Eyebrow>Model comparison</Eyebrow>
          <h1 className="mt-3 max-w-3xl text-balance text-3xl font-semibold leading-[1.08] tracking-tight sm:text-5xl">
            {chosen.map((m, i) => (
              <span key={m.key}>
                {i > 0 ? <span className="text-fg-subtle"> vs </span> : null}
                {m.displayName}
              </span>
            ))}
          </h1>
          <p className="mt-4 max-w-2xl text-pretty text-[15px] leading-7 text-fg-muted sm:text-base">
            {chosen.map((m) => `${PROVIDERS[m.provider].name}’s ${m.displayName}`).join(" and ")} compared on price per million tokens, context window, output limits, reasoning controls and every capability PolyLLM tracks — from the providers’ own listings, nothing guessed.
          </p>
          <div className="mt-6 flex flex-col gap-2 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href={arenaHref}>
                <Swords /> Try {chosen.length === 2 ? "both" : "all"} in Arena
              </Link>
            </Button>
            <Button asChild size="lg" variant="ghost" className="w-full sm:w-auto">
              <Link href="/models">Browse the full catalog</Link>
            </Button>
          </div>
        </Container>
      </section>

      <Container className="py-10 sm:py-14">
        <CompareTable models={chosen} ctx={ctx} />

        {related.length ? (
          <section className="mt-16">
            <h2 className="text-lg font-semibold tracking-tight">More comparisons with {chosen[0].displayName}</h2>
            <ul className="mt-4 grid gap-2 sm:grid-cols-2">
              {related.map(({ f, slug: s }) => (
                <li key={s}>
                  <Link href={`/compare/${s}`} className="panel flex items-center gap-3 p-3 transition-colors hover:bg-bg-muted">
                    <ProviderIcon provider={f.provider} size={16} />
                    <span className="min-w-0 flex-1 truncate text-[13.5px] font-medium">
                      {chosen[0].displayName} <span className="text-fg-subtle">vs</span> {f.displayName}
                    </span>
                    <ArrowRight className="size-4 shrink-0 text-fg-subtle" />
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        ) : null}

        <section className="mt-16 rounded-2xl border border-border bg-bg-subtle/60 p-6 text-center sm:p-10">
          <h2 className="text-balance text-2xl font-semibold tracking-tight sm:text-3xl">Run the same prompt on {chosen.length === 2 ? "both" : "all of them"}.</h2>
          <p className="mx-auto mt-3 max-w-md text-[15px] leading-7 text-fg-muted">PolyLLM Arena streams the answers side by side with latency, tokens and cost — with your own API keys, encrypted.</p>
          <div className="mt-6 flex flex-col justify-center gap-2 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Create a free account <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="ghost" className="w-full sm:w-auto">
              <Link href={arenaHref}>Open Arena</Link>
            </Button>
          </div>
          <p className="mt-6 text-[11px] leading-5 text-fg-subtle">Prices are the providers’ published list prices in USD per million tokens at the last catalog audit. Release dates and knowledge cutoffs appear only when the provider publishes them.</p>
        </section>
      </Container>
    </>
  );
}